<template>
	<view class="puzzle">
		<view class="puzzle_one" v-for="(item,index) in youxiList" :key="index">
			<view class="puzzle_one_left">
				<image :src="item.image" mode="aspectFill"></image>
			</view>
			<view class="puzzle_one_right">
				<view class="right_name">
					{{item.name}}
				</view>
				<!-- 按钮 -->
				<view class="right_count">
					<view class="right_one" style="margin-right: 25rpx;">
						蝌蚪积分{{item.rate}}%
					</view>
					<view class="right_one">
						周期{{item.day}}天
					</view>
					<view class="right_one" style="margin-bottom: 0;margin-right: 25rpx;">
						KDJ数量{{item.kdj}}
					</view>
					<view class="right_one"
						style="margin-bottom: 0;border: none;background-color: #fe6600;color: #ffffff;"
						@click="isPop = true,itemInfo=item" v-if="item.is_order==0">
						抢
					</view>
					<view class="right_one"
						style="margin-bottom: 0;border: none;background-color: #cccccc;color: #ffffff;" v-else>
						抢
					</view>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<view class="puzzle_pop" v-if="isPop">
			<view class="puzzle_pop_centent">
				<text class="wlIcon-shanchu2  closeImage" @click="isPop=false" style="font-size: 40rpx;"></text>
				<view class="puzzle_pop_title">
					{{itemInfo.name}}
				</view>
				<view class="puzzle_pop_one" style="margin-top: 35rpx;">
					<view class="puzzle_pop_one_left">
						KDJ
					</view>
					<view class="puzzle_pop_one_right" v-if="itemInfo.day!=1">
						{{itemInfo.kdj}}
					</view>
					<view class="puzzle_pop_one_right" v-if="itemInfo.day==1">
						{{itemInfo.min_kdj}}~{{itemInfo.max_kdj}}
					</view>
				</view>
				<view class="puzzle_pop_one" style="margin-top: 30rpx;">
					<view class="puzzle_pop_one_left">
						KDJ数量
					</view>
					<view class="puzzle_pop_one_right" v-if="itemInfo.day!=1">
						{{itemInfo.kdj}}
					</view>
					<view class="puzzle_pop_one_right" v-if="itemInfo.day==1">
						<input type="number" v-model="kdj"  :placeholder="`请输入${itemInfo.min_kdj}~${itemInfo.max_kdj}KDJ数量`">
					</view>
				</view>
				<view class="puzzle_pop_one" style="margin-top: 30rpx;" v-if="false">
					<view class="puzzle_pop_one_left">
						支付密码
					</view>
					<view class="puzzle_pop_one_right">
						<input type="text" placeholder="请输入" style="font-size: 28rpx;text-align: right;">
					</view>
				</view>
				<view class="puzzle_pop_button" @click="payPintu">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPop: false, //抢购弹框
				page:1,
				last_page:1,
				youxiList:[],
				itemInfo:"",
				kdj:"",
			}
		},
		onLoad() {
			this.getPintu('init')
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1500)
			this.getPintu('init')
		},
		onReachBottom() {
			if(this.page<this.last_page){
				this.page++
				this.getPintu()
			}
		},
		methods: {
			async getPintu(type) {
				if(type=='init'){
					this.page=1
					this.youxiList=[]
				}
				await uni.request({
					url: "/wanlshop/Signin/aw_tu_list",
					method:"POST",
					data:{
						page:this.page
					},
					success: (res) => {
						this.last_page=res.data.last_page
						if(res.data.data.length){
							if(this.page==1){
								this.youxiList=res.data.data
							}else{
								this.youxiList=[...this.youxiList,...res.data.data]
							}
						}
						// console.log(res,'列表数据')
					}
				})
			},
			async payPintu(){
				if(this.itemInfo.day==1){
					if(!this.kdj) return this.$wanlshop.msg('请输入KDJ数量')
					await uni.request({
						url:"/wanlshop/Signin/aw_tu_order",
						method:"POST",
						data:{
							id:this.itemInfo.id,
							kdj:this.kdj,
						},
						success: (res) => {
							this.isPop = false
							this.$wanlshop.msg('购买成功')
							this.getPintu('init')
						}
					})
				}else{
					await uni.request({
						url:"/wanlshop/Signin/aw_tu_order",
						method:"POST",
						data:{
							id:this.itemInfo.id,
							
						},
						success: (res) => {
							this.isPop = false
							this.$wanlshop.msg('购买成功')
							this.getPintu('init')
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexed {
		position: fixed;
		z-index: 444;
	}

	.puzzle {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 24rpx;

		.puzzle_one {
			width: 100%;
			background-color: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 15rpx 20rpx;
			display: flex;
			margin-bottom: 15rpx;

			.puzzle_one_left {
				image {
					width: 180rpx;
					height: 240rpx;
				}
			}

			.puzzle_one_right {
				flex: 1;
				margin-left: 15rpx;

				.right_name {
					width: 430rpx;
					font-size: 30rpx;
					font-weight: 800;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 20rpx;
				}

				.right_count {
					display: flex;
					flex-wrap: wrap;
					margin-top: 25rpx;

					.right_one {
						width: 200rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #333333;
						border-radius: 30rpx;
						font-size: 25rpx;
						color: #333333;
						margin-bottom: 25rpx;
					}
				}
			}
		}

		// 弹框
		.puzzle_pop {
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.4);
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;

			.puzzle_pop_centent {
				width: 80%;
				background-color: #ffffff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding-bottom: 40rpx;
				position: relative;

				.closeImage {
					position: absolute;
					top: 20rpx;
					right: 25rpx;
					color: #999999;
				}

				.puzzle_pop_title {
					width: 100%;
					height: 100rpx;
					font-size: 35rpx;
					font-weight: 800;
					text-align: center;
					color: #333333;
					box-sizing: border-box;
					padding: 25rpx 60rpx;
				}

				.puzzle_pop_one {
					width: 100%;
					box-sizing: border-box;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.puzzle_pop_one_left {
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
					}

					.puzzle_pop_one_right {
						flex: 1;
						text-align: right;
						font-size: 25rpx;
						color: #333333;
					}
				}

				.puzzle_pop_button {
					width: 80%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 40rpx;
					font-size: 30rpx;
					color: #ffffff;
					background-color: #fe6600;
					margin: 80rpx auto 0;
				}
			}
		}
	}
</style>